import*as t from"../../../core/platform/platform.js";import*as e from"../../../services/window_bounds/window_bounds.js";import*as o from"../helpers/helpers.js";import*as i from"../render_coordinator/render_coordinator.js";import*as n from"../../lit-html/lit-html.js";import*as s from"../../../core/i18n/i18n.js";import*as r from"../buttons/buttons.js";const a=new CSSStyleSheet;a.replaceSync(":host{--override-transparent:rgb(0 0 0/0%);display:var(--dialog-display)}dialog::backdrop{background:var(--override-transparent)}dialog{background:var(--override-transparent);border:none;border-radius:4px;top:var(--dialog-top);padding:var(--dialog-padding);left:var(--dialog-left);right:var(--dialog-right);margin:var(--dialog-margin);margin-left:var(--dialog-margin-left,0);margin-bottom:var(--dialog-margin-bottom);animation-name:slideIn;animation-duration:100ms;animation-timing-function:cubic-bezier(0,0,0.3,1);overflow:hidden}dialog:focus,\ndialog:focus-visible{outline:none}#content{min-width:var(--content-min-width);background:var(--color-background-elevation-dark-only);border-radius:4px;padding-top:var(--content-padding-top);padding-bottom:var(--content-padding-bottom);box-shadow:var(--override-content-box-shadow);max-height:var(--dialog-max-height);max-width:var(--dialog-max-width);overflow:auto;outline:none;clip-path:polygon(var(--content-clip-path))}#content-wrap{filter:drop-shadow(0 1px 2px rgb(60 64 67/30%)) drop-shadow(0 2px 0 rgb(60 64 67/15%))}@keyframes slideIn{from{transform:translateY(var(--dialog-offset-y));opacity:0%}to{opacity:100%}}\n/*# sourceURL=dialog.css */\n");const l=i.RenderCoordinator.RenderCoordinator.instance(),h="HTMLDialogElement"in globalThis;class d extends HTMLElement{static litTagName=n.literal`devtools-dialog`;#t=this.attachShadow({mode:"open"});#e=this.#o.bind(this);#i=this.#n.bind(this);#s=this.#r.bind(this);#a={origin:"MODAL",position:"bottom",horizontalAlignment:"center",showConnector:!1,getConnectorCustomXPosition:null,dialogShownCallback:null,windowBoundsService:e.WindowBoundsService.WindowBoundsServiceImpl.instance(),closeOnESC:!0,closeOnScroll:!0};#l=null;#h=!1;#d=!1;#g=new DOMRect(0,0,0,0);#p=new DOMRect(0,0,0,0);#c=null;#u=null;#S=new MutationObserver(this.#i);#m=new ResizeObserver(this.#w.bind(this));#b=this.windowBoundsService.getDevToolsBoundingElement();#v=this.#C.bind(this);get showConnector(){return this.#a.showConnector}set showConnector(t){this.#a.showConnector=t,this.#y()}get origin(){return this.#a.origin}set origin(t){this.#a.origin=t,this.#y()}get position(){return this.#a.position}set position(t){this.#a.position=t,this.#y()}get horizontalAlignment(){return this.#a.horizontalAlignment}set horizontalAlignment(t){this.#a.horizontalAlignment=t,this.#y()}get windowBoundsService(){return this.#a.windowBoundsService}set windowBoundsService(t){this.#a.windowBoundsService=t,this.#b=this.windowBoundsService.getDevToolsBoundingElement(),this.#y()}get bestVerticalPosition(){return this.#c}get bestHorizontalAlignment(){return this.#u}get getConnectorCustomXPosition(){return this.#a.getConnectorCustomXPosition}set getConnectorCustomXPosition(t){this.#a.getConnectorCustomXPosition=t,this.#y()}get dialogShownCallback(){return this.#a.dialogShownCallback}set dialogShownCallback(t){this.#a.dialogShownCallback=t,this.#y()}set closeOnESC(t){this.#a.closeOnESC=t,this.#y()}set closeOnScroll(t){this.#a.closeOnScroll=t,this.#y()}#w(){this.#p=this.#x().getBoundingClientRect()}#y(){o.ScheduledRender.scheduleRender(this,this.#e)}connectedCallback(){this.#t.adoptedStyleSheets=[a],window.addEventListener("resize",this.#i),document.body.addEventListener("keydown",this.#v),this.#S.observe(this.#b,{childList:!0,subtree:!0}),this.#b.addEventListener("wheel",this.#s),o.SetCSSProperty.set(this,"--dialog-padding","0"),o.SetCSSProperty.set(this,"--override-content-box-shadow","none"),o.SetCSSProperty.set(this,"--dialog-display",h?"block":"none"),o.SetCSSProperty.set(this,"--override-dialog-content-border","10px solid transparent"),o.SetCSSProperty.set(this,"--dialog-padding","3px 5px")}disconnectedCallback(){window.removeEventListener("resize",this.#i),document.body.removeEventListener("keydown",this.#v),this.#b.removeEventListener("wheel",this.#s),this.#S.disconnect(),this.#m.disconnect()}#x(){if(!this.#l){if(this.#l=this.#t.querySelector("dialog"),!this.#l)throw new Error("Dialog not found");this.#m.observe(this.#l)}return this.#l}getHitArea(){return this.#g}async setDialogVisible(t){t?await this.#D():this.#f()}async#P(t){if(t.stopPropagation(),t instanceof PointerEvent&&""===t.pointerType)return;const e=this.#E(t),o=this.#k(t);if(!e)if("pointermove"!==t.type)this.dispatchEvent(new p);else{if(o)return;this.dispatchEvent(new g)}}#E(t){const e=this.#p,o="bottom"===this.bestVerticalPosition?20:-20,i=t.pageX>=e.left&&t.pageX<=e.left+e.width,n=t.pageY>=e.top+o&&t.pageY<=e.top+e.height+o;return i&&n}#k(t){const e=this.#g,o=t.pageX>=e.left&&t.pageX<=e.left+e.width,i=t.pageY>=e.top&&t.pageY<=e.top+e.height;return o&&i}#A(t){if(!t||"MODAL"===t)throw new Error("Dialog origin is null");const e=t instanceof Function?t():t;return e instanceof DOMPoint?{top:e.y,bottom:e.y,left:e.x,right:e.x}:e instanceof HTMLElement?e.getBoundingClientRect():e}#B(t,e){return e.right-t.left>t.right-e.left?"left":"right"}#$(t,e,o){const{bottom:i}=t;return i+e>o?"top":"bottom"}#O(){this.#a.origin&&(this.#h=!0,l.read((()=>{const e=this.#b.getBoundingClientRect(),i=e.width,n=e.height,s=e.left,r=e.top,a=e.right;if("MODAL"===this.#a.origin)return void l.write((()=>{o.SetCSSProperty.set(this,"--dialog-top",`${r}px`),o.SetCSSProperty.set(this,"--dialog-left",`${s}px`),o.SetCSSProperty.set(this,"--dialog-margin","auto"),o.SetCSSProperty.set(this,"--dialog-margin-left","auto"),o.SetCSSProperty.set(this,"--dialog-margin-bottom","auto"),o.SetCSSProperty.set(this,"--dialog-max-height",n-30+"px"),o.SetCSSProperty.set(this,"--dialog-max-width",i-30+"px"),o.SetCSSProperty.set(this,"--dialog-right",document.body.clientWidth-a+"px")}));const h=this.#a.origin,d=this.#A(h),{top:g,right:p,bottom:c,left:u}=d,S=(u+p)/2,m=p-u+10,w=document.body.clientWidth,b=this.#a.getConnectorCustomXPosition?this.#a.getConnectorCustomXPosition():S;l.write((()=>{o.SetCSSProperty.set(this,"--dialog-top","0");const l=this.#x();l.style.visibility="hidden",this.#h&&!l.hasAttribute("open")&&(l.showModal(),this.setAttribute("open",""),this.#h=!1);const{width:h,height:v}=l.getBoundingClientRect();if(this.#u="auto"===this.#a.horizontalAlignment?this.#B(d,e):this.#a.horizontalAlignment,this.#c="auto"===this.#a.position?this.#$(d,v,n):this.#a.position,"auto"===this.#u||"auto"===this.#c)return;this.#g.height=c-g+10*(this.showConnector?2:1),this.#g.width=m;let C=0;o.SetCSSProperty.set(this,"--content-min-width",b-u+20+10+"px"),o.SetCSSProperty.set(this,"--dialog-left","auto"),o.SetCSSProperty.set(this,"--dialog-right","auto"),o.SetCSSProperty.set(this,"--dialog-margin","0");const y=this.showConnector?15:0;switch(this.#u){case"left":{const t=Math.max(u-y,s),e=a-t-30;C=b-t-5,o.SetCSSProperty.set(this,"--dialog-left",`${t}px`),this.#g.x=u,o.SetCSSProperty.set(this,"--dialog-max-width",`${e}px`);break}case"right":{const t=w-p,e=w-a,i=Math.max(t-y,e),n=w-i,r=n-s-30,l=Math.min(r,h);C=b-(n-l),this.#g.x=w-i-m,o.SetCSSProperty.set(this,"--dialog-right",`${i}px`),o.SetCSSProperty.set(this,"--dialog-max-width",`${r}px`);break}case"center":{const t=Math.min(i-30,h);let e=Math.max(S-.5*t,s);e=Math.min(e,a-t),C=b-e-5,o.SetCSSProperty.set(this,"--dialog-left",`${e}px`),this.#g.x=S-.5*m,o.SetCSSProperty.set(this,"--dialog-max-width",i-30+"px");break}default:t.assertNever(this.#u,`Unknown alignment type: ${this.#u}`)}const x=this.showConnector?10:0,D=C-10,f=C+10;let[P,E,k,A,B,$,O,R,T]=["","","","","","","","","",""];switch(this.#c){case"top":{const t="calc(100% - 10px)";this.#a.showConnector&&(P="0 0",E="100% 0",k=`100% calc(${t} - 2px)`,A=`calc(100% - 2px) ${t}`,B=`${D}px ${t}`,$=`${C}px 100%`,O=`${f}px ${t}`,R=`2px ${t}`,T=`0 calc(${t} - 2px)`),o.SetCSSProperty.set(this,"--content-padding-bottom",10+(this.#a.showConnector?10:0)+"px"),o.SetCSSProperty.set(this,"--content-padding-top","10px"),o.SetCSSProperty.set(this,"--dialog-top","0"),o.SetCSSProperty.set(this,"--dialog-margin","auto"),o.SetCSSProperty.set(this,"--dialog-margin-bottom",innerHeight-g+"px"),this.#g.y=g-20,o.SetCSSProperty.set(this,"--dialog-offset-y","20px"),o.SetCSSProperty.set(this,"--dialog-max-height",n-(innerHeight-g)-30-x+"px");break}case"bottom":this.#a.showConnector&&(P="0 12px",E="2px 10px",k=`${D}px 10px`,A=`${C}px 0`,B=`${f}px 10px`,$="calc(100% - 2px) 10px",O="100% 12px",R="100% 100%",T="0 100%"),o.SetCSSProperty.set(this,"--content-padding-top",10+(this.#a.showConnector?10:0)+"px"),o.SetCSSProperty.set(this,"--content-padding-bottom","10px"),o.SetCSSProperty.set(this,"--dialog-top",`${c}px`),this.#g.y=g,o.SetCSSProperty.set(this,"--dialog-offset-y","-20px"),o.SetCSSProperty.set(this,"--dialog-max-height",n-(c-r)-30-x+"px");break;default:t.assertNever(this.#c,`Unknown position type: ${this.#c}`)}const I=[P,E,k,A,B,$,O,R,T].join();o.SetCSSProperty.set(this,"--content-clip-path",I),l.close(),l.style.visibility=""}))})))}async#D(){if(!h)return;if(this.#h||this.hasAttribute("open"))return;this.#h=!0,this.#O(),await l.done(),this.#h=!1;const t=this.#x();t.hasAttribute("open")||t.showModal(),this.#a.dialogShownCallback&&await this.#a.dialogShownCallback(),this.#w()}#r(t){!this.#E(t)&&this.#a.closeOnScroll&&this.#x().hasAttribute("open")&&(this.#f(),this.dispatchEvent(new c))}#C(e){this.#x().hasAttribute("open")&&this.#a.closeOnESC&&e.key===t.KeyboardUtilities.ESCAPE_KEY&&(e.stopPropagation(),e.preventDefault(),this.#f(),this.dispatchEvent(new c))}#R(t){t.stopPropagation(),t.preventDefault(),this.#x().hasAttribute("open")&&this.#a.closeOnESC&&this.dispatchEvent(new c)}#n(){this.#l?.hasAttribute("open")&&this.#b!==document.body&&(this.#f(),this.dispatchEvent(new c))}#f(){!this.#d&&this.#x().hasAttribute("open")&&(this.#d=!0,l.write((()=>{this.#g.width=0,this.removeAttribute("open"),this.#x().close(),this.#d=!1})))}getDialogBounds(){return this.#p}#o(){if(!o.ScheduledRender.isScheduledRender(this))throw new Error("Dialog render was not scheduled");h?n.render(n.html` <dialog @click="${this.#P}" @pointermove="${this.#P}" @cancel="${this.#R}"> <div id="content-wrap"> <div id="content"> <slot></slot> </div> </div> </dialog> `,this.#t,{host:this}):n.render(n.html` <slot></slot> `,this.#t,{host:this})}}o.CustomElements.defineComponent("devtools-dialog",d);class g extends Event{static eventName="pointerleftdialog";constructor(){super(g.eventName,{bubbles:!0,composed:!0})}}class p extends Event{static eventName="clickoutsidedialog";constructor(){super(p.eventName,{bubbles:!0,composed:!0})}}class c extends Event{static eventName="forceddialogclose";constructor(){super(c.eventName,{bubbles:!0,composed:!0})}}var u=Object.freeze({__proto__:null,CONNECTOR_HEIGHT:10,DIALOG_SIDE_PADDING:5,DIALOG_VERTICAL_PADDING:3,DIALOG_PADDING_FROM_WINDOW:30,MODAL:"MODAL",Dialog:d,PointerLeftDialogEvent:g,ClickOutsideDialogEvent:p,ForcedDialogClose:c});const S=new CSSStyleSheet;S.replaceSync(".keybinds-category-header{white-space:nowrap;padding:0 10px 20px;display:flex}.keybinds-category-header-text{line-height:24px;flex:auto;font-weight:bold}.keybinds-key{padding:0.1em 0.6em;border:1px solid var(--color-details-hairline);font-size:11px;background-color:var(--color-background-elevation-1);color:var(--color-text-primary);box-shadow:var(--box-shadow-outline-color);border-radius:3px;display:inline-block;margin:0 0.1em;text-shadow:0 1px 0 var(--color-background);line-height:1.5;white-space:nowrap}.keybinds-list{list-style:none;margin:0;padding:0}.keybinds-list-item{line-height:30px;display:flex;padding:0 10px}.keybinds-list-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;user-select:none;color:var(--color-text-primary);text-align:start;position:relative;margin-right:0}.keybinds-shortcut-separator{white-space:pre-wrap}.keybinds-action-name{flex:auto;padding-right:30px}.keybinds-shortcut{flex:none}.close-icon{width:12px;height:12px;padding-top:2px}\n/*# sourceURL=shortcutDialog.css */\n");const m={showShortcutTitle:"Show shortcuts",dialogTitle:"Keyboard shortcuts",close:"Close"},w=s.i18n.registerUIStrings("ui/components/dialogs/ShortcutDialog.ts",m),b=s.i18n.getLocalizedString.bind(void 0,w);class v extends Event{static eventName="showdialog";constructor(){super(v.eventName)}}class C extends HTMLElement{static litTagName=n.literal`devtools-shortcut-dialog`;#t=this.attachShadow({mode:"open"});#e=this.#o.bind(this);#l=null;#T=null;#I=[];#z=!1;connectedCallback(){this.#t.adoptedStyleSheets=[S]}set data(t){this.#I=t.shortcuts,t.open&&(this.#z=t.open),o.ScheduledRender.scheduleRender(this,this.#e)}#D(){if(!this.#l)throw new Error("Dialog not found");this.#l.setDialogVisible(!0),o.ScheduledRender.scheduleRender(this,this.#e),this.dispatchEvent(new v)}#f(t){if(!this.#l)throw new Error("Dialog not found");this.#l.setDialogVisible(!1),t&&t.stopImmediatePropagation(),o.ScheduledRender.scheduleRender(this,this.#e)}#o(){if(!o.ScheduledRender.isScheduledRender(this))throw new Error("Shortcut dialog render was not scheduled");n.render(n.html` <${r.Button.Button.litTagName} @click="${this.#D}" on-render="${o.Directives.nodeRenderedCallback((t=>{this.#T=t}))}" .data="${{variant:"toolbar",iconName:"help",title:b(m.showShortcutTitle),iconWidth:"16px"}}"></${r.Button.Button.litTagName}> <${d.litTagName} @clickoutsidedialog="${this.#f}" .showConnector="${!0}" .origin="${()=>{if(!this.#T)throw new Error("Button not found");return this.#T}}" .position="${"bottom"}" .horizontalAlignment="${"right"}" on-render="${o.Directives.nodeRenderedCallback((t=>{this.#l=t}))}"> <div class="keybinds-category-header"> <span class="keybinds-category-header-text">${b(m.dialogTitle)}</span> <${r.Button.Button.litTagName} @click="${this.#f}" class="close-icon" .data="${{variant:"toolbar",iconName:"cross",title:b(m.close)}}"></${r.Button.Button.litTagName}> </div> <ul class="keybinds-list"> ${this.#I.map((t=>n.html` <li class="keybinds-list-item"> <div class="keybinds-action-name keybinds-list-text">${t.title}</div> ${t.bindings.map(((e,o)=>n.html` <div class="keybinds-shortcut keybinds-list-text"> <span class="keybinds-key">${e}</span> </div> ${t.bindings.at(o+1)?n.html`<span class="keybinds-shortcut-separator"> - </span>`:n.nothing} `))} `))} </ul> </${d.litTagName}> `,this.#t,{host:this}),this.#z&&(this.#D(),this.#z=!1)}}o.CustomElements.defineComponent("devtools-shortcut-dialog",C);var y=Object.freeze({__proto__:null,ShowDialog:v,ShortcutDialog:C});export{u as Dialog,y as ShortcutDialog};
